@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;

    --card: 0 0% 100%;
    /*  */
    --card-foreground: 195 31% 95%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    /*  */
    --primary: 200 18% 46%;
    /*  */
    --primary-foreground: 0 0% 98%;
    /*  */
    --accent-alt: 200 27% 96%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 9%;

    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;

    --accent: 195 31% 95%;
    /*  */
    --accent-foreground: 222 56% 17%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 220 22% 92%;
    --input: 195 31% 95%;
    --ring: 0 0% 3.9%;

    --radius: 0.5rem;
    --header-height: 60px;
    --aside-width: 250px;
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;

    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;

    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;

    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;

    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;

    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }

  .primary-shadow {
    box-shadow:
      rgba(19, 33, 68, 0.08) 0px -1px 0px 1px inset,
      rgba(19, 33, 68, 0.16) 0px 1px 3px 0px,
      rgba(19, 33, 68, 0.08) 0px 0px 1px 0px,
      rgba(19, 33, 68, 0.1) 0px 1px 1px 0px;
  }

  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
  }
}

.loading-el {
  position: relative;
  overflow: hidden;
  pointer-events: none;
  color: transparent;
}

.loading-el::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  @apply bg-white opacity-50;
}

.loading-el::before {
  content: "";
  position: absolute;
  z-index: 11;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  border-width: 3px;
  @apply h-5 w-5 animate-spin rounded-full border-primary border-t-transparent;
}

* {
  min-width: 0;
  min-height: 0;
}

/* select labels beside required inputs */
.required-label::after {
  content: "*";
  color: hsl(var(--destructive));
  margin-left: 0.25rem;
}

.reset-input {
  @apply m-0 h-10 rounded-md border border-border bg-background bg-white px-3 py-2 text-sm shadow-sm ring-offset-accent transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:outline-none focus-visible:border-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[valid=false]:!border-destructive;
}

.copilot__container:not(:hover) .copilot .box {
  @apply bg-secondary/70;
}

.copilot__container:is(:hover) .copilot .box {
  @apply bg-secondary;
}

.copilot__container:is(:hover) .copilot .box:hover {
  @apply bg-accent;
}

/* adding animation (opacity) */
@keyframes blink-animation {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  70% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.blink {
  animation: blink-animation 1s steps(5, start) both;
}

.cross-dots-bg {
  background:
    radial-gradient(black 3px, transparent 4px),
    radial-gradient(black 3px, transparent 4px),
    linear-gradient(#fff 4px, transparent 0),
    linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px),
    linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px),
    #fff;
  background-size: 109px 109px, 109px 109px, 100% 6px, 109px 109px, 109px 109px;
  background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
}

.diagonal-stripes {
  --stripe-width: 10px;
  --spacing: calc(var(--stripe-width) * 5);
  --stripe-color: rgba(0, 0, 0, 0.2);
  --stripe-background: transparent;
  background-image: linear-gradient(45deg, var(--stripe-color) 25%, transparent 25%, transparent 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, transparent 75%, transparent);
  background-size: var(--spacing) var(--spacing);
  background-color: var(--stripe-background);
}


@keyframes reflection-eff {
  0% {
    transform: translateY(-250px);
  }

  100% {
    transform: translateY(250px);
  }
}
.running-shadow-over-element::before {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 250%;
  height: 20px;
  rotate: 45deg;
  animation:reflection-eff infinite 2s linear alternate;
  @apply bg-white/10;
}
